<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="/common/common-css.jsp"%>
<script>
	cmdList = "/phonefee/data.action";
</script>
<style>
#jquery-table td {
	cursor: pointer !important
}

.load_bg {
	background: #000;
	opacity: 0.1;
	left: 0px;
	top: 0px;
	position: fixed;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: 10000;
}

.load_img {
	left: 50%;
	top: 180px;
	position: fixed;
	height: 50px;
	overflow: hidden;
	z-index: 20000;
}
</style>
</head>
<body class="no-skin">

	<div class="load_bg" style="display: none"></div>
	<img src="http://img.xmiles.cn/commentloading.gif" class="load_img"
		style="display: none" />
	<div class="page-content">
		<form id="queryForm" action="${cmdList}">
			<div class="page-content-area">
				<div class="row">
					<div class="col-sm-12">
						<div class="widget-box"
							style="border: 0px solid #ccc; border-top: none; border-bottom: none; margin-top: 15px;">
							<hr style="margin-top: 0px; margin-bottom: 0x">
							<div class="widget-header widget-header-blue widget-header-flat">
								<h4 class="widget-title">话费/流量订单</h4>
								<div class="widget-toolbar">
									<a href="#" data-action="collapse"> <i
										class="ace-icon fa fa-chevron-up"></i>
									</a>
								</div>
							</div>
							<div class=" widget-body">
								<!-- <div class="widget-main" style="padding:12px;border:0px solid #ccc; border-top:none;border-bottom:none;"> -->
								<div class="widget-main">

									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-4 control-label"
											style="text-align: right" for="sex">提单时间:</label>
										<div class="col-sm-8">
											<div class="input-daterange input-group">
												<input type="text" data-date-format="yyyy-mm-dd"
													class="date-picker input-sm form-control"
													style="padding-left: 0px" name="startTime" id="startTime">
												<span class="input-group-addon" style="width: 6px"> <i
													class="fa fa-exchange"></i>
												</span> <input type="text" data-date-format="yyyy-mm-dd"
													class="date-picker input-sm form-control"
													style="padding-left: 0px" name="endTime" id="endTime">
											</div>
										</div>
									</div>

									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-4 control-label"
											style="text-align: right" for="sex">回调时间:</label>
										<div class="col-sm-8">
											<div class="input-daterange input-group">
												<input type="text" data-date-format="yyyy-mm-dd"
													class="date-picker input-sm form-control"
													style="padding-left: 0px" name="callb_startTime"
													id="callb_startTime"> <span
													class="input-group-addon" style="width: 6px"> <i
													class="fa fa-exchange"></i>
												</span> <input type="text" data-date-format="yyyy-mm-dd"
													class="date-picker input-sm form-control"
													style="padding-left: 0px" name="callb_endTime"
													id="callb_endTime">
											</div>
										</div>
									</div>

									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-6 control-label"
											style="text-align: right">本地订单号:</label>
										<div class="col-sm-6">
											<input type="text" class="input-sm form-control"
												style="padding-left: 0px" name="orderid" id="orderid">
										</div>
									</div>

									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-6 control-label"
											style="text-align: right">聚合订单号:</label>
										<div class="col-sm-6">
											<input type="text" class="input-sm form-control"
												style="padding-left: 0px" name="sporder_id" id="sporder_id">
										</div>
									</div>
									
									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-6 control-label"
											style="text-align: right">提交聚合订单号:</label>
										<div class="col-sm-6">
											<input type="text" class="input-sm form-control"
												style="padding-left: 0px" name="id" id="id">
										</div>
									</div>

									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-6 control-label"
											style="text-align: right" for="sex">订单类型:</label>
										<div class="col-sm-6">
											<s:select name="type" list="%{paramsMap.typeList}"
												listKey="code" listValue="name" cssClass="form-control"
												headerKey="" headerValue="请选择"></s:select>
										</div>
									</div>

									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-6 control-label"
											style="text-align: right" for="sex">充值号码:</label>
										<div class="col-sm-6">
											<input type="text" class="input-sm form-control"
												style="padding-left: 0px" name="number" id="number">
										</div>
									</div>

									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-6 control-label"
											style="text-align: right" for="memo">活动分类:</label>
										<div class="col-sm-6">
											<s:select name="memo_" list="%{paramsMap.memolist}"
												listKey="memo" listValue="memo" cssClass="form-control"
												headerKey="" headerValue="请选择"></s:select>
										</div>
									</div>


									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-6 control-label"
											style="text-align: right" for="sex">充值状态:</label>
										<div class="col-sm-6">
											<s:select name="state" list="%{paramsMap.statslist}"
												listKey="code" listValue="name" cssClass="form-control"
												headerKey="" headerValue="请选择"></s:select>
										</div>
									</div>

									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3"
										style="text-align: right">
										<button class="btn btn-purple  no-border" type="button"
											name="btn-query" onclick="query_any()">
											<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
											查询
										</button>
										&nbsp;&nbsp;&nbsp;
										<button class="btn btn-grey  no-border" type="reset">
											<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
											重置
										</button>

									</div>
									<div class="row">
										<div class="col-xs-12">
											<a href="javascript:void(0)"
												class="btn btn-success btn-small" style="display: none"
												id="output" onclick="loadlist()">导出列表</a>
											<table id="jquery-table"
												class="table table-striped table-bordered table-hover">
											</table>
										</div>
										<!-- /.col -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.widget-main -->
							</div>
							<!-- /.widget-body -->
						</div>
						<!-- /.widget-box -->
					</div>
					<!-- /.col-sm-12 -->
				</div>
				<!-- /.row -->
				<hr style="display: none;" id="delete_hr">
				<div class="row">
					<div class="col-xs-12">
						<table id="jquery-table"
							class="table table-striped table-bordered table-hover">
						</table>
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->
			</div>
			<!-- /.page-content-area -->
		</form>
	</div>
	<!-- /.page-content -->

	<%@ include file="/common/common-js.jsp"%>

	<!-- inline scripts related to this page -->

	<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
	<script type="text/javascript">
		//【查询】按钮Click事件
		function query_any() {
			$("#output").removeAttr("style");
			$(".load_bg").removeAttr("style");
			$(".load_img").removeAttr("style");
			if (jqTable != null) {
				jqTable.fnDraw();
			} else {
				loaddata();
			}
			$("#delete_btn").attr("style", "display:block");
			$("#delete_hr").attr("style",
					"margin-top:0px;margin-bottom:20px;display:block");
		}

		var jqTable = null;
		var loaddata = function() {
			jQuery(function($) {
				jqTable = $('#jquery-table')
						.dataTable(
								{
									//数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
									"columnDefs" : [
											{
												"title" : "提单时间",
												"targets" : [ 0 ],
												"data" : "ctime",
												"name" : "ctime", //JSON返回属性
												"bSortable" : false,
											},
											{
												"title" : "回调时间", //列名
												"name" : "callback_time",
												"data" : "callback_time", //JSON返回属性
												"targets" : [ 1 ], //第几列
												"bSortable" : true,
											},
											{
												"title" : "本地订单号", //列名
												"name" : "orderid",
												"data" : "orderid", //JSON返回属性
												"targets" : [ 2 ], //第几列
												"bSortable" : true,
											},
											{
												"title" : "聚合订单号",
												"name" : "sporder_id",
												"data" : "sporder_id",
												"targets" : [ 3 ],
												"bSortable" : false,
											},
											{
												"title" : "类型",
												"name" : "service_type",
												"data" : "service_type",
												"targets" : [ 4 ],
												"width" : "4%",
												"bSortable" : false,
												"render" : function(value,
														type, row) { // 返回自定义内容
													switch (value) {
													case 1:
														return "话费";
													case 2:
														return "流量";
													default:
														return "未知";
													}
												}
											},
											{
												"title" : "内容",
												"name" : "cardname",
												"data" : "cardname",
												"targets" : [ 5 ],
												"bSortable" : false,
											},
											{
												"title" : "充值号码",
												"name" : "phone_number",
												"data" : "phone_number",
												"targets" : [ 6 ],
												"bSortable" : false,
											},
											{
												"title" : "充值金额(<span class='amount'></span>)",
												"name" : "amount",
												"data" : "amount",
												"width" : "6%",
												"targets" : [ 7 ],
												"bSortable" : false,
											},
											{
												"title" : "消费金额(<span class='ordercash'></span>)",
												"name" : "ordercash",
												"data" : "ordercash",
												"targets" : [ 8 ],
												"bSortable" : false,
											},
											{
												"title" : "活动分类",
												"name" : "memo",
												"data" : "memo",
												"targets" : [ 9 ],
												"bSortable" : false,
											},
											{
												"title" : "充值状态",
												"name" : "state",
												"data" : "state",
												"targets" : [ 10 ],
												"width" : "5%",
												"bSortable" : false,
												"render" : function(value,
														type, row) { // 返回自定义内容
													switch (value) {
													case 1:
														return "成功";
													case 2:
														return "办理中";
													case 9:
														return "充值失败";
													case 0:
														return "没有开始充值";
													default:
														return "未知";
													}
												}
											} ],
									"sAjaxSource" : ctx + cmdList + "?rand="
											+ Math.random(),//数据源URL
									"fnServerData" : function(sSource, aoData,
											fnCallback) {//从服务器请求数据
										var data = $('#queryForm')
												.serializeObject();
										data.aoData = JSON.stringify(aoData);
										$
												.ajax({
													"dataType" : 'json',
													"type" : "POST",
													"url" : sSource,
													"data" : data,
													"success" : function(resp) {
														fnCallback(resp);
														initListPage();
														$(".load_bg").attr(
																"style",
																"display:none");
														$(".load_img").attr(
																"style",
																"display:none");
														console.log(resp);
														$(".amount")
																.html(
																		resp.total_datas[0].amount);
														$(".ordercash")
																.html(
																		resp.total_datas[0].ordercash);
													},
													"error" : function(
															XMLHttpRequest,
															textStatus,
															errorThrown) {
														$(".load_bg").attr(
																"style",
																"display:none");
														$(".load_img").attr(
																"style",
																"display:none");
														alert('请求服务器错误,请刷新重试！！');//错误提示，包括服务器重启导致的session失效
													},
												});
									},
									"fnRowCallback" : function(nRow, aData,
											iDisplayIndex, iDisplayIndexFull) {
										//console.log("---" + nRow + "+++++" + aData["id"]);
										//=====================这里实现行双击事件======================//
										nRow.ondblclick = function() {
										};
									},
									"sScrollXInner" : "100%",
									"sScrollY" : "100%",//如果不设置，IE会有问题
									"aaSorting" : [ [ 0, "desc" ] ]
								//初始化加载，默认按第几列排序、排序方式（列从0开始计算）
								});

			});//end jquery初始化
		};
		
		function loadlist(){
			var form = document.forms["queryForm"];
			form.action= ctx + "/phonefee/exportRecharge.action";
			form.submit();
		}

		jQuery(function($) {
			$(".date-picker").datepicker({
				autoclose : true
			}).next().on(ace.click_event, function() {
				$(this).prev().focus();
			});

			$("#couponsource").combobox();
			$("#channel").combobox();
		});
		function opstatus(id, memo) {

			openDialogWithRand("/phone/order/opstatus.jsp?id=" + id + "&memo="
					+ memo, 800, 800, "办理审核", function(data) {
			});
		}
	</script>
</body>
</html>
